/**
 * vue 分页
 */
define('components/VuePage/vue-page', null, function() {

const VuePage = {
    props: {
        'totalRecords': {default: 0},
        'pageSize': {default: 10},
        'pageSize': {default: 10},
        'linkItemNumber': {default: 3},
        'onChange': {default: null}
    },
    data: function() {
        return {
            currentPage: 1
        };
    },
    methods: {
        changePage: function(e) {
            var src = e.target;

            if(1 === src.nodeType && 'A' === src.nodeName.toUpperCase()) {
                let pageChanged = false;
                let page = parseInt(src.getAttribute('data-page'));

                page > this.totalPages && (page = this.totalPages);
                page < 1 && (page = 1);

                pageChanged = page !== this.currentPage;
                this.currentPage = page;

                if(pageChanged && null !== this.onChange) {
                    this.onChange(page, e);
                }
            }
        },
        goPage: function(e) {
            var code = e.keyCode;
            if(13 !== code) {
                return;
            }

            var v = e.target.value;
            if(/\D/.test(v)) {
                return;
            }

            var pageChanged = false;
            var page = parseInt(v);
            page > this.totalPages && (page = this.totalPages);
            page < 1 && (page = 1);

            pageChanged = page !== this.currentPage;
            this.currentPage = page;

            if(pageChanged && null !== this.onChange) {
                this.onChange(page, e);
            }
        },
        getIndexs: function() {
            var ret = [];
            var half = this.half;
            var counter = 0;

            for(var i=this.currentPage-half; i<this.currentPage; i++) {
                i > 0 && (ret.push(i), counter++);
            }
            ret.push(this.currentPage);
            for(var i=this.currentPage+1; i<=this.currentPage+half+half-counter; i++) {
                i <= this.totalPages && (ret.push(i));
            }

            return ret;
        }
    },
    mounted: function() {},
    computed: {
        totalPages: function() {
            return Math.ceil(this.totalRecords / this.pageSize);
        },
        half: function() {
            return Math.floor(this.linkItemNumber / 2);
        }
    },
    template:
`
<div class="x-page" v-on:click="changePage" v-on:keyup="goPage">
    <div data-role="x-page-jump"><input type="text" />/ {{totalPages}} 页</div>
    <a data-page="1" href="javascript:;">首页</a>
    <a v-bind:data-page="currentPage-1" href="javascript:;">❮</a>

    <em v-for="i in this.getIndexs()">
        <a v-if="i !== currentPage" v-bind:data-page="i" href="javascript:;">{{i}}</a>
        <span v-else data-role="current">{{currentPage}}</span>
    </em>

    <a v-bind:data-page="currentPage+1" href="javascript:;">❯</a>
    <a v-bind:data-page="totalPages" href="javascript:;">尾页</a>
</div>
`
};

return VuePage;
});
